<!-- 公司弹框的插件 -->
<template>
  <div class="pr-70">
    <!-- 设置权限的弹出框 -->
    <div v-if="dialogObj.isDialog.docEntr == 'admin'">
      <el-row :gutter="10">
        <el-col :span="4">
          <div>
            <span class="font13">文件夹名称</span>
          </div>
        </el-col>
        <el-col :span="20">
          <div>
            <!-- 权限设置的文件的名称 -->
            <span class="font13">{{ dialogObj.checkData[0].name }}</span>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <div>
            <span class="font13">文件权限</span>
          </div>
        </el-col>
        <el-col :span="20">
          <div>
            <span class="font12 fontADADAD">可以对当前目录节点配置权限</span>
          </div>
          <!-- 可管理，编辑文件 -->
          <div>
            <el-row
              v-for="(data, index) in setData"
              :key="index"
            >
              <el-col :span="20">
                <div>
                  <span class="font13 blackFont">{{ data.text }}</span>
                </div>
                <!-- 选择的部门或者空 -->
                <div class="setContent">
                  <div
                    v-if="data.checkTitle == '全公司'"
                    class="setTitle"
                  >
                    <span
                      class="blueFont font13 ml-10"
                    >已选范围：{{ data.checkTitle }}</span>
                  </div>
                  <div
                    v-if="data.data && data.data.length && data.checkTitle != '全公司'"
                    @click.stop="shouMainUser(data, index)"
                    class="setTitle cursorDiv"
                  >
                    <img
                      :class="data.showMain?'node-parent-open':'node-parent-close'"
                      class="ml-10"
                      src="./../../../assets/tree-node.png"
                    >
                    <span
                      class="blueFont font13"
                    >已选范围：{{ data.checkTitle }}</span>
                  </div>
                  <div
                    v-if="data.data && !data.data.length && data.checkTitle != '全公司'"
                    class="set30AndLine"
                  >
                    <span
                      class="fontADADAD font13"
                    >无</span>
                  </div>
                  <!-- 展示的内容 -->
                  <div
                    v-if="data.showMain"
                    class="setMain"
                  >
                    <div
                      v-for="(item, dataIndex) in data.data"
                      :key="dataIndex"
                      class="setDownShow"
                    >
                      <el-row>
                        <el-col
                          :span="6"
                          class="pl20"
                        >
                          <span class="font12 blackFont">{{ item.shortname }}</span>
                        </el-col>
                        <el-col :span="8">
                          <span class="font12 blackFont">{{ item.name }}</span>
                        </el-col>
                        <el-col
                          :span="10"
                          class="textRight"
                        >
                          <el-checkbox
                            @change="cancleItem(item)"
                            v-model="item.check"
                            class="font12 cursorDiv"
                          />
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <el-dropdown
                  @command="handleAssign"
                  trigger="click"
                >
                  <el-button
                    v-if="data.jurisdiction"
                    class="whiteFont buttonBg font12 buttonSize"
                  >
                    编辑权限
                  </el-button>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(assign, assignIndex) in assignSelect"
                      :command="{...data, ...assign}"
                      :key="assignIndex"
                    >
                      {{ assign.title }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 操作记录的弹出框  -->
    <div
      v-if="dialogObj.isDialog.docEntr == 'record'"
      class="recordDiv"
    >
      <!-- 如果没有数据就显示暂无数据的icon标签 -->
      <div
        v-if="dateRecordData && dateRecordData.length == 0"
        class="noMainList"
      >
        <div class="mainNoData">
          <img
            src="../../../assets/nodata.png"
            alt=""
          >
          <div class="font20 grayColor">
            暂无数据
          </div>
        </div>
      </div>
      <div
        v-for="(dateData, dateDataIndex) in dateRecordData"
        :key="dateDataIndex"
        class="recordDialog"
      >
        <!-- 操作记录的日期头部显示 -->
        <el-row class="height40">
          <!-- 黄色的圆形标记 -->
          <el-col
            :span="1"
            class="alignItem height40"
          >
            <div class="signCirlce">
              <div class="signCirlceInside" />
            </div>
          </el-col>
          <el-col
            :span="4"
          >
            <div class="pl10">
              <span class="font18 font3D3D3D">{{ weekDays[new Date(dateData.date).getDay()] || '暂无' }}</span>
            </div>
          </el-col>
          <el-col
            :span="19"
          >
            <div>
              <span class="fontADADAD">{{ dateData.date }}11</span>
            </div>
          </el-col>
        </el-row>
        <!-- 主要的操作记录内容 -->
        <div class="pl10">
          <div class="height20 timeWire positionRe">
            <div class="timeWireWidth" />
          </div>
          <div
            v-for="(record, recordIndex) in dateData.data"
            :key="recordIndex"
            class="timeWire"
          >
            <el-row>
              <el-col
                :span="5"
                class="pl20"
              >
                <div class="positionRe">
                  <div class="everyCircle" />
                  <span class="fontADADAD">{{ record.time }}</span>
                </div>
              </el-col>
              <el-col
                :span="3"
              >
                <div>
                  <span>{{ record.createName }}</span>
                </div>
              </el-col>
              <el-col
                :span="16"
              >
                <!-- 授权文件权限 -->
                <div
                  v-html="record.context"
                  class="recordContent"
                >
                  <!-- <span>授权</span>
                  <span class="fontEF7D13">{{ record.content.fileName }}</span>
                  <span>予</span>
                  <span class="fontEF7D13">{{ record.content.users.join('、') }}</span> -->
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="height20 timeWire positionRe">
            <div class="everyCircle endCircle" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from '../../../controllers/list/listController';
// 公司文件权限model
import roleModel from '../../../model/roleModel';
import { roleTitleScope } from '../../../common/util';

export default {

  components: {},
  props: {
    dialogObj: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      list: new List(),
      setData: [], // 当前的权限数据
      assignSelect: [
        {
          title: '全公司',
          code: 'company',
          tag: '全公司',
        },
        {
          title: '指定分公司',
          code: 'branch',
          tag: '分公司',
        },
        {
          title: '指定部门',
          code: 'dept',
          tag: '部门',
        },
        {
          title: '指定角色',
          code: 'role',
          tag: '角色',
        },
        {
          title: '指定人员',
          code: 'staff',
          tag: '人员',
        },
      ], // 下拉菜单的数据显示
      dateRecordData: [], // 操作记录的数据
      weekDays: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'], // 日期数组
    };
  },
  async created() {
    if (this.dialogObj.isDialog.docEntr == 'record') {
      // 这边要调取操作记录的接口, 这边的数据没有赋值，等接口好了
      const dislogs = await this.list.getDiskLogs(this.dialogObj.checkData[0].nodeId);
      this.dateRecordData = dislogs;
    }
    if (this.dialogObj.isDialog.docEntr == 'admin') {
      const powerList = await this.list.getPowerFiles(this.dialogObj.checkData[0].nodeId);
      this.setData = roleModel.create(powerList).setData;
    }
  },
  mounted() {
  },
  methods: {
    // 树查询
    selectWin_(options) {
      const that = this;
      JE.selectWin({
        type: 'tree',
        configInfo: options.configInfo,
        valueType: 'id',
        value: options.value,
        callback(res) {
          if (!res.length) return;
          const checkData = [];
          const ids = [];
          res.forEach((item) => {
            const obj = {
              id: item.data.id,
              name: item.data.text,
              type: options.code,
              shortname: options.tag,
              check: true,
              role: options.role,
            };
            ids.push(item.data.id);
            checkData.push(obj);
          });
          // 选中的数据
          const newCodeList = [];
          const roleData = that.setData.filter(item => (item.role == options.role));
          roleData[0].data.forEach((item) => {
            if (item.type != options.code && item.check) {
              newCodeList.push(item);
            }
            if (!item.check) {
              newCodeList.push(item);
            }
          });

          that.$set(roleData[0], 'data', newCodeList.concat(checkData));
          that.$set(roleData[0], 'showMain', true);
          that.$set(roleData[0], 'checkTitle', roleTitleScope(roleData[0].data, options.role));
          that.$emit('checkDataList', that.setData, that.dialogObj.checkData[0].nodeId);
        },
      });
    },
    // 当前选中的内容
    handleAssign(commid) {
      // 获取回显的数据
      this.setData = this.setData.filter((item) => {
        item.role != commid.role && (item.showMain = false);
        return item;
      });
      const data = this.setData.filter(item => (item.role == commid.role));
      const staffData = []; // 人员当前选中的人
      if (data.length) {
        const codeData = data[0].data.filter(item => (item.type == commid.code));
        if (codeData.length) {
          const ids = [];
          codeData.forEach((item) => {
            item.check && ids.push(item.id);
            staffData.push({ name: item.name, id: item.id });
          });
          commid.value = ids.join(',');
        }
      }
      switch (commid.code) {
        case 'company':
          this.commidCompany(commid);
          break;
        case 'dept':
          this.selectWin_({
            configInfo: 'JE_RBAC_DEPARTMENT,,,M',
            ...commid,
          });
          break;
        case 'branch':
          this.selectWin_({
            configInfo: 'JE_RBAC_COMPANYMENT,,,M',
            ...commid,
          });
          break;
        case 'role':
          this.selectWin_({
            configInfo: 'JE_RBAC_ROLE,,,M',
            ...commid,
          });
          break;
        case 'staff':
          this.selectUserPub(staffData, commid);
          break;
      }
    },
    // 公司选中的方法处理
    commidCompany(commid) {
      const roleData = this.setData.filter(item => (item.role == commid.role));
      this.$set(roleData[0], 'checkTitle', '全公司');
      this.$set(roleData[0], 'data', []);
      this.$emit('checkDataList', this.setData, this.dialogObj.checkData[0].nodeId);
    },
    // 人员选择的公共方法
    selectUserPub(staffData, commid) {
      const idList = [];
      if (staffData.length) {
        staffData.forEach((item) => {
          idList.push(item.id);
        });
      }
      const that = this;
      JE.vue.selectUser({
        title: '',
        multiple: true,
        valueType: 'id',
        configInfo: ',,,M',
        value: idList.join(','),
        callback(res) {
          if (res && res.length > 200) {
            JE.msg('最多选中200个人分享~');
            return false;
          }
          const checkData = [];
          const ids = [];
          res.forEach((item) => {
            const obj = {
              id: item.id,
              name: item.text,
              type: commid.code,
              shortname: commid.tag,
              check: true,
              role: commid.role,
            };
            ids.push(item.id);
            checkData.push(obj);
          });
          // 选中的数据
          const newCodeList = [];
          const roleData = that.setData.filter(item => (item.role == commid.role));
          roleData[0].data.forEach((item) => {
            if (item.type != commid.code && item.check) {
              newCodeList.push(item);
            }
            if (!item.check) {
              newCodeList.push(item);
            }
          });

          that.$set(roleData[0], 'data', newCodeList.concat(checkData));
          that.$set(roleData[0], 'showMain', true);
          that.$set(roleData[0], 'checkTitle', roleTitleScope(checkData.concat(newCodeList), commid.role));
          that.$emit('checkDataList', that.setData, that.dialogObj.checkData[0].nodeId);
        },
      });
    },
    shouMainUser(data, index) {
      this.setData = this.setData.filter((setD, setDIndex) => {
        if (setDIndex == index) {
          setD.showMain = !setD.showMain;
        } else {
          setD.showMain = false;
        }
        return setD;
      });
    },
    cancleItem(item) {
      this.$set(item, 'check', item.check);
      const roleData = this.setData.filter(dataItem => (dataItem.role == item.role));
      this.$set(roleData[0], 'checkTitle', roleTitleScope(roleData[0].data, item.role));
      this.$emit('checkDataList', this.setData, this.dialogObj.checkData[0].nodeId);
    },
  },

};

</script>
<style lang='scss' scoped>
</style>
